>>

''HTML Anchor Links in Tiddlers''

* >>他們在做什麼？ * >>我該怎麼做？ * >>限制和需要注意的事情 * >>更多範例 * >>使用 HTML 元素的建議 * >>使用目標名稱的建議 * >>嵌入時避免重複的 ID * >>樣式提示 >> !! 他們在做什麼？在 TiddlyWiki 錨點連結可以幫助我們連結到目標點和渲染的條目中的不同段落。它們可以幫助讀者流覽更長的條目內容。例如，此連結，>>底部, 應該帶你到這個條目的底部。下面 "返回頂部" 的連結應該傳回給您，返回到此條目的頂部。 >>返回頂部 >> !! 我該怎麼做？製作錨點連結只有 2 個步驟。 * 首先，在需要的地方建立目標點（稱為一個 '錨點'）。 * 其次，在讀者可能需要的地方增加一個連結。就是這樣。 ''第 1 步：建立一個 '錨點' （連結目標）'' ``` ``` * 增加一個 <<.attr id>> 屬性至任何 HTML5 的標記，並在 '位址' 值之前放置一個 `#`。以下是一些您可以使用的建議標記。 * 將此代碼放在目標位置。例如，在條目的底部。 ''第 2 步：建立一個指向目標錨點的連結'' ``` Bottom ``` * 建立一個 `` 連結使用與目標完全相同的 '位址' 值，但其前面有雙 `##` 字元。 * 將此代碼放在對讀者最有幫助的地方。上述範例可適用於 ~TiddlyWiki 中的許多情況，像是此條目頂部的目錄。 ''真的這麼簡單嗎？'' 是的，就這麼簡單。但是... 在 ~TiddlyWikiin 與標準 HTML5 錨點連結和一些特定的 ~TiddlyWiki 限制有一些小的區別。 >>返回頂部

>>限制和需要注意的事情

''步驟 1：'' 建立目標錨點 * 與標準 HTML5 不同，在 ~TiddlyWiki 中，您必須在目標位址值的前面放置單個 `#` 字元，該位址於 <<.attr id>> 屬性之後。 * 與標準 HTML5 不同，~TiddlyWiki 錨點連結是區分大小寫的。在上面的範例 #Bottom_of_tiddler 可以，但是 #bottom_of_Tiddler 不能。（請注意，範例 1 的 #Bottom_of_tiddler 中，使用的單個 `#` 字元。 * 避免在連結中使用 `%` 字元，因為某些瀏覽器有一個錯誤，其中導航到包含 `%` 字元的錨點有時會失敗（請參閱下面的警告）。 * >/>避免在連結中使用任何空白 (見下面 > title="點擊以轉到註釋 1。">注釋 1). * 在 ~TiddlyWiki 中的每個連結位址應是唯一的。如果嵌入會建立具有相同 <<.attr id >> 屬性的多個實例，導航到第一個滿足上述條件的實例。為避免這種情況，您可以在 <<.attr id>> 和 <<.attr href>> 屬性中，使用 [[qualify 巨集|qualify Macro]] 與下面給出的範例樣式類似： > >嵌入時避免重複的 ID. ''步驟 2：'' 建立指向目標的連結 * 請記住，<<.attr href>> 值應以''兩個'' `#` 字元開始，比目標錨的 <<.attr id >> 值多一。 * 請記住，~TiddlyWiki 錨點連結，區分大小寫 ''步驟 3：'' 導航到目標通常，您可以按下連結，~TiddlyWiki 將滾動視窗，以便目標錨點位於視窗頂部，但存在以下幾個限制： * 在 ~TiddlyWiki 中，如果條目不在故事河中，或未在側邊欄中顯示，則錨點連結無法使用。 * 在 ~TiddlyWiki 中，如果條目在故事河中，或在側邊欄中但錨標記的目標點在頁面上不可見，則錨點連結無法使用 (例如，條目被折合或錨點在非顯示的 $reveal 小工具內)。 Ctrl + 點擊這樣的錨點連結，將打開一個新的瀏覽器視窗/頁籤，並載入基本網頁，不會導航到預期的條目。 * 在 ~TiddlyWiki 中，如果控制台 > 外觀 > 故事檢視設定為 Zoomin（單頁檢視）和條目不在故事河的頂部（即未顯示），則錨點連結無法使用。 * 按下錨點連結時，瀏覽器的導航歷史記錄將更新，連結的 href 值將附加到網頁的 URL 中。即使控制台 > 設定 > 歷史記錄導覽設定為 "不更新歷史記錄"，也會發生這種情況"。 <$macrocall $name=.note _=""">>> title="點擊返回">1. <<.attr id>> 屬性的 [ext[HTML5 規範|https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id]] 提到其值不應包含任何空格。目前 ^^(2020 年 12 月)^^ 一個 <<.attr id>> 值有空白，有時正常工作。但是，它可能並非在所有瀏覽器中都有效，並且不能保證將來可以正常工作。""" /> <<.warning "某些瀏覽器可能無法瀏覽到 ''id'' 值包含一個 `%` 字元後跟著 2 位元數字的錨點目標。這是瀏覽器中的一個錯誤，~TiddlyWiki 無法修復。為了安全起見，請避免使用 `%` 字元。">> >>返回頂部

>>更多範例

在每種情況下，目標代碼都放置在讀者導航到的目標位置，連結代碼被放置在幫助讀者導航的位置。 ```

我的目標標題

連結到我的目標標題 ``` 這看起來像：

我的目標標題

連結到我的目標標題

```

!! 我的目標段落一個 `

` HTML 標記通常用於定義 HTML 文件中的段落，例如章節、標題、頁腳或文件的任何其他段落。

按下此錨點連結將轉到：連結到我的目標段落 ``` 這看起來像：

!! 我的目標段落一個 `

` HTML 標記通常用於定義 HTML 文件中的段落，例如章節、標題、頁腳或文件的任何其他段落。

按下此錨點連結將轉到：連結到我的目標段落

>>回到頂部

>>''使用 HTML 元素的建議''

一個新標題

"""/>|標題可以有 <<.attr id>> 屬性| |<<.def section>> |<$text text="""

這是一個新的段落

>>使用目標名稱的建議

A New Heading

"""/>|不保證空白在所有瀏覽器中工作| |<<.def "Avoid: %">> |<$text text="""

這是一個新的段落

>> ''嵌入時避免重複的 ID''

<<.attr id>> 和錨點連結到此標頭已作出如下： ``` >>嵌入時避免重複的 ID

>>嵌入時避免重複的 ID

``` ;要對此有效： * <<.attr href>> 和 <<.attr id>> 值使用[[屬性的巨集調用語法|HTML in WikiText]]，並使用 [[qualify 巨集|qualify Macro]] 建立唯一的 <<.attr id>> 值。 * <<.attr id>> 和錨點連結都必須在同一條目中。 * `=` 和 `<<` 之間不得有任何引號字元。 * 目標名稱前後的雙引號是可選的，但建議使用。 * `>` 字元，兩個 `>>` 來關閉 `<` 來關閉 `>>回到頂部

>>''樣式提示''

如果您不希望連結看起來像外部連結，請指定 `` 元素的 <<.attr class>> 屬性值 <<.def tc-tiddlylink>>，且如果您希望連結也是斜體和粗體，請指定附加類 <<.def "tc-tiddlylink-missing tc-tiddlylink-shadow">> 如下所示： ``` 回到頂部或只是回到 >>提示. ``` 回到頂部或只是回到 >>樣式提示. 如果要包含一個 <<.attr id>> 屬性到邊欄目錄中的一個連結，您可以將其包括在列出的條目的 <<.field caption>> 欄位，如同以下所顯示的： ``` 您的標題 ``` >> >>回到頂部